<template>
	<view class="register">
		<view class="title">
			赊货签
		</view>

		<uni-forms ref="form" :modelValue="formData" label-width="80px" :rules="rules">
			<view v-show="!showCode" class="textH">
				修改赊货签密码
			</view>
			<uni-forms-item v-show="!showCode" label="手机号" name="Phone">
				<input type="number" v-model="formData.Phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<p v-show="!showCode"></p>
			<view v-show="showCode">
				<uni-forms-item label="验证码" name="SmsCode">
					<input type="number" v-model="formData.SmsCode" placeholder="请输入验证码" />
				</uni-forms-item>
				<p></p>
				<uni-forms-item label="密码" name="Password">
					<input type="password" v-model="formData.Password" placeholder="请输入密码" />
				</uni-forms-item>
				<p></p>
				<uni-forms-item label="重复密码" name="rpw">
					<input type="password" v-model="formData.rpw" placeholder="请再次输入密码" />
				</uni-forms-item>
				<p></p>
			</view>
			<button round @click="registerOrSend" type="primary">{{!showCode?'发送验证码':'修改'}}</button>

			<view v-show="!showCode" style="margin-left: 20px;">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox value="a" :checked="agree" />我已阅读并同意
					</label>
					<text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text>
					<text @click="openUse" style="color: #b051ff;">《隐私政策》</text>
				</checkbox-group>
			</view>
		</uni-forms>


	</view>
</template>

<script>
	import {
		regPhone
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				showCode: false,
				formData: {
					Phone: '',
					SmsCode: '',
					Password: '',
					rpw: ''
				},
				agree: false, // 是否同意条款
				rules: {
					Phone: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					SmsCode: {
						rules: [{
							require: true,
							errorMessage: '请填写验证码',
						}]
					},
					Password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					},
					rpw: {
						rules: [{
							required: true,
							errorMessage: '请再次填写密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								console.log(data);
								if (value !== data.Password) return callback('两次密码不一致')
								return true
							}
						}]
					},
				}
			}
		},
		methods: {
			openAgreement() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=1'
				})
			},
			openUse() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=0'
				})
			},
			changeAgree(e) {
				if (e.detail.value.length > 0) this.agree = true
				else this.agree = false
			},
			// 注册或发送验证码
			registerOrSend() {
				if (this.showCode) this.register()
				else {
					if (!this.agree) return uni.showToast({
						icon: 'none',
						title: '请阅读并同意使用条款后进行修改'
					})
					this.send()
				}
			},
			register() {
				let _phone = this.formData.Phone
				let _pwd = this.formData.rpw
				let _code = this.formData.SmsCode
				this.$refs.form.validate().then(res => {
					this.$http('post', '/Base_Manage/Base_User/SubResetUserPwd?Phone=' + _phone + '&ConPwd=' +
						_pwd + '&SmsCode=' + _code, {}).then(res => {
						if (res.Success) {
							uni.showToast({
								icon: 'none',
								title: '修改成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/Login/Login'
								})
							}, 1000)
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
				}).catch(err => {
					console.log(err);
				})
			},
			send() {
				this.$refs.form.validateField(['Phone']).then(res => {
					uni.showLoading()
					this.$http('post', '/Base_Manage/Base_User/ResetUserPwd', this.formData).then(res => {
						uni.hideLoading()
						if (res.Success) {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
							this.showCode = true
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
				}).catch((err) => {
					console.log(err);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.title {
		text-align: center;
		font-size: 70rpx;
		font-weight: bolder;
		color: #fff;
		margin-top: 140rpx;
		margin-bottom: 15%;
	}

	.textH {
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		color: #666666;
		margin-bottom: 60rpx;
	}

	::v-deep.uni-forms {
		background-color: #fff;
		display: flexbox;
		border-radius: 17px;
		padding: 20px 0;
	}

	::v-deep.uni-forms-item {
		color: #000;
		padding: 10rpx 20rpx 10rpx 33rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

	}

	::v-deep.uni-forms-item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 3;
	}

	.register {
		width: 100%;
		height: 100%;
		background: $LoginBG no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
		padding: 30rpx;

		p {
			border-bottom: 1px solid #d5d5d5;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 5%;
			margin-top: -2%;
		}

		button {
			width: 90%;
			border-radius: 100rpx;
			font-size: 20px;
			font-weight: bold;
			margin-top: 75rpx;
			margin-bottom: 20rpx;
			background: linear-gradient(to left, #b5ceff, #3b6dff);
		}


		.flex {
			display: flex;
			margin-top: 40rpx;
			text-align: center;
			color: #a6a6a6;
			font-size: 15px;
			margin-left: 20%;
		}
	}
</style>